﻿@model Blog.Model.Article

@{
    ViewBag.Title = "添加编辑博客";
    Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}

@section css{
    <link href="~/css/wangEditor/wangEditor.css" rel="stylesheet" />
}

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>发布博客</legend>
</fieldset>

<div class="layui-field-box">
    @*<form class="layui-form" asp-action="Add" data-ajax-success="onSuccess" data-ajax="true" data-ajax-method="POST">*@
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">标题 </label>
            <div class="layui-input-block">
                <input type="text" asp-for="Title" id="Title" name="Title" lay-verify="Title" autocomplete="off" placeholder="请输入博客标题" class="layui-input" />
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">类别 </label>
            <div class="layui-input-block" style="z-index:99999">
                <select asp-for="CategoryId" id="CategoryId" name="CategoryId" lay-filter="CategoryId">
                    <option value="1" selected="selected">技术博客</option>
                    <option value="2">随笔日志</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">内容 </label>
            <div class="layui-input-block">
                <div id="Content"></div>
                @*<textarea id="Content" rows="18" name="Content" placeholder="请输入内容..." class="layui-textarea"></textarea>*@
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="button" class="layui-btn" id="addBlogArticle" value="保存" />
            </div>
        </div>

        @Html.HiddenFor(c => c.Id);
        @Html.AntiForgeryToken()
    </form>
</div>

@section scripts{
    <script src="~/js/wangEditor/wangEditor.js"></script>

    <script type="text/javascript">
        // 当你使用表单时，Layui会对select、checkbox、radio等原始元素隐藏，
        // 从而进行美化修饰处理。但这需要依赖于form组件，所以你必须加载 form，并且执行一个实例。
        // 值得注意的是：导航的Hover效果、Tab选项卡等同理（它们需依赖 element 模块）
        // 显示select、check、radio控件
        layui.use('form', function () {

            var form = layui.form; // 只有执行了这一步，部分表单元素才会自动修饰成功

            //但是，如果你的HTML是动态生成的，自动渲染就会失效
            //因此你需要在相应的地方，执行下述方法来手动渲染，跟这类似的还有 element.init();
            //form.render();

        });

    </script>

    <script type="text/javascript">

        // 编辑器 全局变量
        var editor;

        $(function () {
            var E = window.wangEditor;
            // 获取元素
            var textarea = document.getElementById('Content');
            // 生成编辑器
            editor = new E(textarea);

            editor.customConfig.debug = true

            // 上传图片
            // 配置说明：https://www.kancloud.cn/wangfupeng/wangeditor3/335782
            //editor.customConfig.uploadImgServer = '/Admin/Blog/Upload';
            //editor.customConfig.uploadFileName = 'imgFile';
            // 提示，如果上传图片提示错误，可以 打开 debug 模式 （会在 console.log 提示错误详细信息）来辅助排查错误
            // editor.customConfig.debug = true;
            // 设置超时 默认的 timeout 时间是 10 秒钟
            // editor.customConfig.uploadImgTimeout = 30 * 1000;
            // 监听函数 - 可使用监听函数在上传图片的不同阶段做相应处理
            //editor.customConfig.uploadImgHooks = {
            //    // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
            //    // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
            //    customInsert: function (insertImg, result, editor) {
            //        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
            //        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

            //        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
            //        var url = result.data[0]; // result.url
            //        insertImg(url)

            //        // result 必须是一个 JSON 格式字符串！！！否则报错
            //        alert(url);
            //    }
            //}

            editor.customConfig.customUploadImg = function (files, insert) {
                // files 是 input 中选中的文档列表
                // insert 是获取图片 url 后，插入到编辑器的方法
                var uploadData = new FormData();
                for (var i = 0; i < files.length; i++) {
                    uploadData.append(files[i].name, files[i]);
                }

                //insert("https://localhost:44381/upload/images/2018092511331782b840da-d841-4f5a-8734-bbb13cc7f421.jpg");
                //return;

                $.ajax({
                    type: "POST",
                    url: "Upload",
                    cache: false,
                    data: uploadData,
                    processData: false, // 不做参数化处理
                    contentType: false,
                    async: false,
                    success: function (response) {
                        //alert(response);
                        console.log('success=>' + response.data);
                        for (var i = 0; i < response.data.length; i++) {
                            insert(response.data[i]);
                            console.log('insert url =>' + response.data[i]);
                        }
                    },
                    failure: function (response) {
                        //alert(response);
                        console.log('fail=>' + response.responseText);
                    },
                    complete: function (response) {
                        //alert(response);
                        console.log(response);
                    }
                });
            }

            editor.create();

            // 文本编辑器 绑定文章内容
            var content = '@Model?.Content';

            if (content != '' && content != null && content != undefined) {

                // 转义
                var div = document.createElement('div');
                div.innerHTML = content;

                editor.txt.append(div.innerText || div.textContent);
            }

        });

        // 添加博文之后
        function afterAddBlog(data) {

            var serverData = data.split(':');
            if (serverData[0] == 'ok') {

                alert(serverData[1]);
                window.location.reload();
            }
        }
    </script>

    <script>
        // 表单提交
        $("#addBlogArticle").on('click', function () {

            //alert('add');

            var data = JSON.stringify({
                "Title": $("#Title").val(),
                "Content": editor.txt.html(),
                "CategoryId": $("#CategoryId").val(),
                //"Id": $("#Id").val(),
                "__RequestVerificationToken": $('input:hidden[name="__RequestVerificationToken"]').val()
            });

            //var xhr = new XMLHttpRequest;
            //xhr.open("POST", "/Admin/Blog/Add", false);
            //xhr.setRequestHeader("Content-Type", "application/json");
            //xhr.send(data);

            //xhr.onreadystatechange = function () {
            //    if (xhr.readyState == 4 && xhr.status == 200) {
            //        var s = xhr.responseText;
            //        alert(s);
            //    }
            //    else {
            //        console.log(xhr.responseText);
            //    }
            //}

            $.ajax({
                type: 'POST',
                url: 'Add',
                //contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
                contentType: 'application/json',
                data: data,
                dataType: 'json',
                //async: false,
                success: function (res) {
                    //alert(res);
                    console.log(res);
                },
                error: function (e) {
                    layer.msg(e.responseText);
                },
                complete: function (e) {
                    console.log(e.responseText);
                }
            });

        });
    </script>

}

